<template>
  <div class="app-container">

    <!-- <el-button type="primary" @click="handleAddRole">新增</el-button> -->
      <div style="height:650px;overflow: auto;">
          <el-table :data="rolesList" v-loading='loading' style="width: 100%;margin-top:30px;" border>
            <el-table-column  label="类别名称" >
              <template slot-scope="scope">
                {{ scope.row.displayName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="类别类型">
              <template slot-scope="scope">
                {{ scope.row.displayType }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
                  <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
                      <el-button slot="reference" type="danger">删除</el-button>
                  </el-popconfirm>
              </template>
            </el-table-column>

          </el-table>
    </div>
    <el-pagination
            background
            layout="prev, pager, next,sizes,total"
            :total='total'
            @current-change='current_change'
            @size-change='size_change'
            style="text-align: center; margin-top: 60px;"
            :page-sizes="[10, 50, 100, 1000]"
            >
    </el-pagination>

  </div>
</template>

<script>
import api from '@/api/version/category'


export default {
  name: 'CategoryList',

  data() {
    return {
        rolesList:[],
        total:0,
        limit:10,//默认10条
        page:1,//当前页码
        loading:false,
    }
  },
  created() {
  
  },
  mounted(){
    this.versionList()
  },
  methods: {
     handleAddRole(){

      },
      handleEdit(e){
          this.$router.push({ path: '/category/edit',query:{id:e.id}})
      },
      handleDelete(e){
         api.Delete(e).then(res=>{
            if(res.data.errno==0)
            {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.versionList()
            }
         })
      },
    current_change(e){
       this.page=e
       this.versionList()
     },
     size_change(e){
       this.limit=e
       this.versionList()
     },
    versionList() {
      this.loading = true
      api.list({
        limit:this.limit,
        page:this.page
      }).then(res => {
        if(res.data.errno==0){
                this.rolesList=res.data.data.list
                this.total=res.data.data.total
                this.limit=res.data.data.limit
                this.page=res.data.data.page
                this.loading=false
            }
      }).catch(() => {
        this.Loading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>


</style>